import type { Todo } from '../types/todo'
import TodoItem from './TodoItem'

interface TodoListProps {
    todos: Todo[],
    handleToggle: (id: number, completed: boolean) => void,
    onDelete: (id: number) => void
}

export default function TodoList({ todos, handleToggle, onDelete }: TodoListProps) {

    const handleDeleteTodo = (id: number) => {
        onDelete(id);
    };

    return (
        <div className="space-y-2">
            {
                todos.length === 0 && (
                    <p className='text-gray-500 text-sm text-center'>No Todos yet. Add a new one above.</p>
                )
            }
            {
                todos.map(todo => (
                    <TodoItem key={todo.id} todo={todo} handleToggle={handleToggle} handleDeleteTodo={handleDeleteTodo} />
                ))
            }
        </div>
    )
}
